<template>
  <div class="" :style="{
    height: '100%',
    '--imgw': getscalepxc(1),
    '--imgh': getscalepxc(3),
    '--imgr': getscalepxc(-13),
    '--imgt': getscalepxc(-5),
    '--imgp': getscalepxc(5),
  }">
    <beijingdatatable :header="header" :datalist="datalist" :coltype="'banma'"/>
  </div>
</template>
<script>
import data from "../data";

import commonmixins from "@/mixins/bigScreen/commonmixins";
import axios from "@/utils/requestdp";
import qs from 'qs';

export default {
  name: "datatablebeijingreyuantaian",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
    };
  },
  computed: {},
  watch: {},
  mounted() {
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<div style='background-image: url("/configuration/2d/reyuan.png");width: fit-content;background-size: 100%;background-position: center;background-repeat: no-repeat;padding: 5px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>`,
        flex: 15,
      },
      {
        name: `供温<br/><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 10,
      },
      {
        name: `回温<br/><span style="color: ${unitcolor};">(℃)</span>`,
        flex: 10,
      },
      {
        name: `供压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `回压<br/><span style="color: ${unitcolor};">(MPa)</span>`,
        flex: 10,
      },
      {
        name: `供热面积<br/><span style="color: ${unitcolor};">(万/㎡)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
    this.loadData();
  },
  methods: {
    loadData() {
      let aaa = [];
      this.nameListHeat = [];
      this.nameListStation = [];
      this.pids = [];
      this.pidsHeat = [];
      this.pidsStation = [];
      axios.get('/bigScreen/bigScreen').then(res => {
        // let data = res.data[6].attrValue.split(',');
        let data = res.data.filter(v => v.attrName === 'heatplant_pids')[0].attrValue.split(',');
        data.forEach(v => {
          this.pids.push(v.split('@@')[1]);
          if (v.split('@@')[0] === 'heatplant') {
            this.pidsHeat.push(v.split('@@')[1]);
            this.nameListHeat.push({
              pid: Number(v.split('@@')[1]),
              name: `<span class="name">${v.split('@@')[2]}</span>`
            })
          } else if (v.split('@@')[0] === 'station') {
            this.pidsStation.push(v.split('@@')[1]);
            this.nameListStation.push({
              pid: Number(v.split('@@')[1]),
              name: `<span class="name">${v.split('@@')[2]}</span>`
            })
          }
          
        })
        let params = {
          pageNum: 1,
          pageSize: 30,
          pids: this.pidsHeat.join(',')
        }
        // 关联告警
        this.warnList = [];
        axios.post('/warn/msg/list?pageNum=1&pageSize=3000', {
          objType: '001' // 热源告警
        }).then(rs => {
          let warnList = rs.rows;
          this.warnList = warnList.filter(w => this.pids.indexOf(w.pid) > -1)
          // 查询热源监控
          axios.get('/model/heatplantRealtimeMonitor?'+qs.stringify(params)).then(rs => {
            this.tableData = rs.rows;
            this.nameListHeat.forEach((v, i) => {
              this.tableData.forEach(v2 => {
                if (v.pid === v2.pid) {
                  this.nameListHeat[i]['m001t'] = this.formatVal(v2['m001t']);
                  this.nameListHeat[i]['m002t'] = this.formatVal(v2['m002t']);
                  this.nameListHeat[i]['m001p'] = this.formatVal(v2['m001p']);
                  this.nameListHeat[i]['m002p'] = this.formatVal(v2['m002p']);
                } else {
                  this.nameListHeat[i]['m001t'] = `<span class="default">--</span>`;
                  this.nameListHeat[i]['m002t'] = `<span class="default">--</span>`;
                  this.nameListHeat[i]['m001p'] = `<span class="default">--</span>`;
                  this.nameListHeat[i]['m002p'] = `<span class="default">--</span>`;
                }
              })
              if (!('m001t' in this.nameListHeat[i])) {
                this.nameListHeat[i]['m001t'] = `<span class="default">--</span>`;
                this.nameListHeat[i]['m002t'] = `<span class="default">--</span>`;
                this.nameListHeat[i]['m001p'] = `<span class="default">--</span>`;
                this.nameListHeat[i]['m002p'] = `<span class="default">--</span>`;
              }
            })
            console.log(this.nameListHeat)
            console.log(this.warnList)
            this.nameListHeat.forEach((v, i) => {
              this.warnList.forEach(v2 => {
                if (v.pid == v2.pid) {
                  let code = v2.code;
                  let codeList = code.split('-');
                  if (codeList[4] == '004') {
                    let m001t = this.delSpan(this.nameListHeat[i]['m001t']);
                    if (m001t !== '--') {
                      this.nameListHeat[i]['m001t'] = this.formatVal(m001t, String(v2.bound));
                    }
                  } else if (codeList[4] == '005') {
                    let m002t = this.delSpan(this.nameListHeat[i]['m002t']);
                    if (m002t !== '--') {
                      this.nameListHeat[i]['m002t'] = this.formatVal(m002t, String(v2.bound));
                    }
                  } else if (codeList[4] == '006') {
                    let m001p = this.delSpan(this.nameListHeat[i]['m001p']);
                    if (m001p !== '--') {
                      this.nameListHeat[i]['m001p'] = this.formatVal(m001p, String(v2.bound));
                    }
                  } else if (codeList[4] == '007') {
                    let m002p = this.delSpan(this.nameListHeat[i]['m002p']);
                    if (m002p !== '--') {
                      this.nameListHeat[i]['m002p'] = this.formatVal(m002p, String(v2.bound));
                    }
                  }
                }
              })
            })
            aaa = this.nameListHeat.map(v => Object.values(v))
            // 关联告警
            this.warnListStation = [];
            let bbb = [];
            axios.post('/warn/msg/list?pageNum=1&pageSize=3000', {
              objType: '007' // 热力站告警
            }).then(rs => {
              let warnListStation = rs.rows;
              this.warnListStation = warnListStation.filter(w => this.pids.indexOf(w.pid) > -1)
              // 查询热力站数据
              let formdata = new FormData()
              formdata.append('search', `&pid in (${this.pidsStation.join(',')})`)
              // 查询热源监控
              axios.post('/model/substationMonitor?&pageSize=300&pageNum=1', formdata).then(rs => {
                let tableData2 = rs.data;
                this.nameListStation.forEach((v, i) => {
                  tableData2.forEach(v2 => {
                    if (v.pid == v2.pid) {
                      this.nameListStation[i]['m_001t'] = this.formatVal(v2['m_001t']);
                      this.nameListStation[i]['m_002t'] = this.formatVal(v2['m_002t']);
                      this.nameListStation[i]['m_001p'] = this.formatVal(v2['m_001p']);
                      this.nameListStation[i]['m_002p'] = this.formatVal(v2['m_002p']);
                    }
                  })
                  if (!('source_type' in this.nameListStation[i])) {
                    this.nameListStation[i]['m_001t'] = `<span class="default">--</span>`;
                    this.nameListStation[i]['m_002t'] = `<span class="default">--</span>`;
                    this.nameListStation[i]['m_001p'] = `<span class="default">--</span>`;
                    this.nameListStation[i]['m_002p'] = `<span class="default">--</span>`;
                  }
                })
                this.nameListStation.forEach((v, i) => {
                  this.warnListStation.forEach(v2 => {
                    if (v.pid == v2.pid) {
                      let code = v2.code;
                      let codeList = code.split('-');
                      if (codeList[4] == '004') { // 供水温度
                        let m001t = this.delSpan(this.nameListStation[i]['m_001t']);
                        this.nameListStation[i]['m_001t'] = this.formatVal(m001t, String(v2.bound));
                      } else if (codeList[4] == '005') { // 回水温度
                        let m002t = this.delSpan(this.nameListStation[i]['m_002t']);
                        this.nameListStation[i]['m_002t'] = this.formatVal(m002t, String(v2.bound));
                      } else if (codeList[4] == '006') { // 供水压力
                        let m001p = this.delSpan(this.nameListStation[i]['m_001p']);
                        this.nameListStation[i]['m_001p'] = this.formatVal(m001p, String(v2.bound));
                      } else if (codeList[4] == '007') { // 回水压力
                        let m002p = this.delSpan(this.nameListStation[i]['m_002p']);
                        this.nameListStation[i]['m_002p'] = this.formatVal(m002p, String(v2.bound));
                      }
                    }
                  })
                })
                bbb = this.nameListStation.map(v => Object.values(v))
                let ccc = [...aaa, ...bbb]
                let ddd = [];
                this.pids.forEach(p => {
                  ccc.forEach(c => {
                    if (p == c[0]) {
                      ddd.push(c.splice(1))
                    }
                  })
                })
                console.log('热源')
                console.log(ddd)
                this.datalist = ddd;
                
                this.$nextTick(() => {
                  let defaultList = document.querySelectorAll('.default');
                  let low = document.querySelectorAll('.tablewarnlow');
                  let high = document.querySelectorAll('.tablewarnhigh');
                  let name = document.querySelectorAll('.name');
                  defaultList.forEach(v => {
                    v.style.fontSize = this.getscalepx(10);
                  })
                  low.forEach(v => {
                    v.style.fontSize = this.getscalepx(10);
                  })
                  high.forEach(v => {
                    v.style.fontSize = this.getscalepx(10);
                  })
                  name.forEach(v => {
                    v.style.fontSize = this.getscalepx(10);
                  })
                })
              });
            })
          })
        })
      })
    },
    formatVal(item, type) {
      if (type) {
        if (type === '1') {
          return (
            '<span style="color: #DA5A28;position: relative;"><div class="tablewarnhigh"></div>' +
              item +
            "</span>"
          );
        } else if (type === '0') {
          return (
            '<span style="color: #139CF6;position: relative;"><div class="tablewarnlow"></div>' +
              item +
            "</span>"
          );
        }
      } else {
        if (item === null || item === undefined || item == Infinity) {
          return `<span class="default">--</span>`;
        } else {
          return `<span class="default">${item}</span>`;
        }
      }
      
    },
    // 取html字符串中的值
    delSpan(item) {
      if (item.indexOf('span') > -1) {
        return item.split('</span>')[0].split('>').pop();
      } else {
        return item;
      }
    }
  },
};
</script>
<style lang='scss'>
.tablewarnhigh {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinghigh.png");
  width: var(--imgw);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.tablewarnlow {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinglow.png");
  width: var(--imgw);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.default {
  color: #A0C8DB;
  font-family: '黑体';
  font-weight: bold;
}
.name {
  color: #fff;
}
</style>